<template>
	<!-- 导航页 -->
	<view class="app">
		<!-- header -->
		<view class="header">
			<!-- 顶部logo图 -->
			<u-navbar :is-back="true" title=" ">
				<view class="slot-wrap">
					<top-bar></top-bar>
				</view>
			</u-navbar>
			
			<view class="nav-bar">
				<u-grid :col="4">
					<u-grid-item :custom-style="navItemStyle" v-for="(item, index) in navList" :key="index" @click="clickNav(index)">
						<image class="nav-icon" :src="item.icon" mode=""></image>
						<view class="nav-text">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- body -->
		<view class="body">
			<view class="section">
				<view class="left" @click="clickBlock('健康证明办理')">
					<view class="title">健康证明办理</view>
					<view class="text2">全省通用</view>
					<view class="text">立即办理</view>
				</view>
				<view class="right">
					<view class="top">
						<view class="item" @click="clickBlock('食安优品')">
							<view class="title">食安优品</view>
							<view class="text">立即购买</view>
						</view>
						<view class="item" @click="clickBlock('量化分级')">
							<view class="title">量化分级</view>
							<view class="text">立即报名</view>
						</view>
					</view>
					<view class="bottom" @click="clickBlock('食安科普')">
						<view class="title">食安科普</view>
						<view class="text">立即查看</view>
					</view>
				</view>
			</view>
		</view>
		<!-- footer -->
		<view class="footer">
		</view>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import DEMO_NAV from "@/data/demoNav.js";

	let $GLOBAL = getApp().globalData;

	export default {
		data() {
			return {
				disabled: false,
				topUrl: this.$resource.topUrl, // 顶部logo文字
				navList: [], // 导航
				
				navItemStyle:{
					padding: '18rpx 12rpx',
				},
				
				sectionFontSize: this.$css.sectionFontSize,
				sectionBold: this.$css.sectionBold,
				
			}
		},
		onLoad(options = {}) {
			this.initPage(options);
		},
		onReady() {
			
		},
		methods: {
			initPage() {
				this.getNavList();
			},
			// 读取导航列表
			getNavList() {
				this.navList = getApp().globalData.navNavList;
			},
			// 点击了导航
			clickNav(index) {
				const nav = this.navList[index];
				if (config.debug) console.log('点击了导航', index, nav)
				if (!nav.href) {
					vk.toast('未维护导航地址');
					return;
				}
				if (nav.type == 'inner') {
					this.pageTo(nav.href);
				} else if (nav.type == 'wap') {
					this.pageToWap(nav.href);
				} else if (nav.type == 'wxmp') {
					this.pageToMP(nav.href);
				} else {
					vk.toast('导航尚未维护' + nav.type);
					return;
				}
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 跳转到外部网站
			pageToWap(path) {
				// this.pageTo(`/pages/web_view/web_view?url=${path}`);
				location.href = path;
			},
			// 跳转到小程序
			pageToMP(appid) {
				// #ifdef MP-WEIXIN
				uni.navigateToMiniProgram({
					appId: appid,
					success(res) {
						// 打开成功
						console.log('打开成功')
					}
				})
				// #endif
				// #ifdef H5
				let appCode;
				if (appid == 'wxb85522c2bbe198bc') appCode = 'tijian';
				else if (appid == 'wx1bd7c68cb5318bf2') appCode = 'tiaojie';
				if (!appCode) {
					vk.toast('未配置小程序appid：' + appid);
					return;
				}
				this.$util.request(
						'http://api.haoyuekeji.top/http/router/plugs/lzy/weixin/client/pub.weixin.generateUrlLink', {
							appCode,
							path: '',
							query: '',
						}, 'GET')
					.then(res => {
						if (config.debug) console.log('获取小程序短链接res', res)
						if (res.code === 0) {
							location.href = res.data;
						} else {
							vk.toast(res.msg)
						}
					})
					.catch(err => {
						if (config.debug) console.log('获取小程序短链接err', err)
						vk.toast('获取小程序短链接err！' + JSON.stringify(err))
					})
				// #endif
			},
			clickBlock(dom){
				vk.toast('点击了' + dom)
			}
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		}
	}
</script>

<style lang="scss" scoped>
	.section{
		display: flex;
		justify-content: space-around;
		
		.title{
			padding: 10rpx 0;
			font-size: 16px;
		}
		
		.left{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 0;
			width: 300rpx;
			height: 240rpx;
			background-color: #009146;
			color: #fff;
			font-size: 12px;
			text-align: center;
			border-radius: 50rpx;
			box-sizing: border-box;
			
			.text2{
				padding: 6rpx 0;
				width: 150rpx;
				background-color: #71D773;
				border-radius: 50rpx;
			}
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 400rpx;
			height: 240rpx;
			color: #fff;
			font-size: 12px;
			text-align: center;
			border-radius: 50rpx;
			
			.top{
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 110rpx;
				.item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 180rpx;
					height: 100%;
					background-color: #71D773;
					border-radius: 30rpx;
				}
			}
			.bottom{
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				height: 110rpx;
				background-color: #009146;
				border-radius: 30rpx;
			}
		}
	}
	.footer{
		height: 50rpx;
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}
</style>